<div th:fragment="control_chart_common">
<script type="text/javascript">
	function metadata_chart_common(params)
	{
		params = $.extend({}, {
			GRID : {},
			X_Y_AXIS : {},
			DATASET : {}
		}, params);
		return $.extend(new metadata_chart_base(params), this);
	}

	function metadata_view_chart_common(control)
	{
		this.DATASET = function()
		{
			var view = $($("#DATASET").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			var seriesData = $.extend({}, this.control.getMetadata("DATASET").series);
			var legendData = $.extend({}, this.control.getMetadata("DATASET").legend);
			var series = option.series, sql = option.sql, linkId = option.linkId, linkMc = option.linkMc;

			var setDataSetDetail = function(s)
			{
				var name = s.name, type = s.type, column = s.column, stack = s.stack || "" ;
				var detail_view = $($("#DATASET_DETAIL").html());
				detail_view.find("input[name=title]").val(name);
				detail_view.find("select").val(type);
				detail_view.find("input[name=column]").val(column);
				detail_view.find("input[name=stack]").val(stack);
				return detail_view;
			};
			var getDataSetDeatil = function()
			{
				option.sql = $(view).find("textarea").val();
				$(view).find(".dataset_detail").each(function(i, item)
				{
					var n = $(item).find("input[name=title]").val();
					var c = $(item).find("input[name=column]").val();
					var s = $(item).find("input[name=stack]").val();
					var t = $(item).find("select").val();
					$.extend(option.series[i], {
						name : n,
						column : c,
						type : t,
                        stack : s
					});
					$.extend(option.legend.data[i], {
						name : n
					});
				});
			};

			//设置下钻参数
            var setLink = function (dom) {
                var name = $(dom).attr("name");
                var value = $(dom).val();
                if(name=="linkId"){
                    option["linkId"] = value;
                    option["linkMc"] = $(dom).siblings("input").val();
                }
            }

			$(view).find("textarea").val(sql);
			for ( var i in series)
			{
				$(view).append(setDataSetDetail(series[i]));
			}
            //初始化下钻页面参数
			if(typeof(linkId) == "undefined"){
                view.find('input[name="linkId"]').attr("value","");
            }else{
                view.find('input[name="linkId"]').attr("value",linkId);
            }
			if(typeof(linkMc) == "undefined"){
                view.find('input[name="linkMc"]').attr("value","");
            }else{
                view.find('input[name="linkMc"]').attr("value",linkMc);
            }
			//增加按钮
			view.find(".add-btn").click(function()
			{
				var p = $.extend({}, seriesData);
				option.series.push(p);
				option.legend.data.push($.extend({}, legendData));
				$(view).append(setDataSetDetail(p));
				_this.linkViewOption(option);
			});
			//系列名、字段名
			view.on("keyup", "input,textarea", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			view.on("focus", "input,textarea", function()
			{
				$(this).popover("show");
			});
            view.on("keyup change", "input,select", function () {
                setLink(this);
                _this.linkViewOption(option);
            });
			view.on("blur", "input,textarea", function()
			{
				$(this).popover("hide");
			});
			//系列类型
			view.on("change", "select", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "column", function(result)
				{
					try
					{
						if (result.state == "true")
						{
							option.tooltip.formatter = "{a} <br/>{b}: {c}"+result.DW;
							option.xAxis[0].data = result.NAME;
							option.yAxis[0].data = result.NAME;
							for ( var i in series)
							{
								series[i].data = result[series[i].column];
							}
							_this.linkViewOption(option);
						}
						else
						{
							$.QuickAlert.alertFail({
								content : result.faultInfo
							});
						}
					} catch (e)
					{
						console.error(e);
					}
				});
			});
			//删除按钮
			view.on("click", ".delete-btn", function()
			{
				var index = $(this).index(".delete-btn");
				option.series.splice(index, 1);
				option.legend.data.splice(index, 1);
				$(this).parents(".dataset_detail").remove();
				_this.linkViewOption(option);
			});
			$(this.settingPanel).append(view);
		};
		this.X_Y_AXIS = function()
		{
			var view = $($("#X_Y_AXIS").html());
			var metadata = this.control.getMetadata();
			var _this = this;
			var option = metadata["OPTION"];
			var tr = $("<tr>");
			if(option.xAxis[0].type == undefined || option.xAxis[0].type == "category"){
				tr.append($("#X_SHOW").html());
				tr.append($("#X_AXIS_LENGTH").html());
			}
			if(option.yAxis[0].type == undefined || option.yAxis[0].type == "category"){
				tr.append($("#Y_SHOW").html());
				tr.append($("#Y_AXIS_LENGTH").html());
			}
			$(view).find("table").append(tr);
			$(view).find("input[name=xAxis]").val(option.xAxis[0].name);
			$(view).find("input[name=yAxis]").val(option.yAxis[0].name);
			$(view).find("input[name=xRotate]").val(option.xAxis[0].axisLabel.rotate);
			$(view).find("input[name=yRotate]").val(option.yAxis[0].axisLabel.rotate);
			$(view).find("select[name=xInterval]").val(option.xAxis[0].axisLabel.interval);
			$(view).find("select[name=yInterval]").val(option.yAxis[0].axisLabel.interval);
			$(view).find("input[name=xFormatter]").val();
			$(view).find("input[name=yFormatter]").val();
			$(view).find("input[name]").keyup(function()
			{
				option.xAxis[0].name = $(view).find("input[name=xAxis]").val();
				option.yAxis[0].name = $(view).find("input[name=yAxis]").val();
				option.xAxis[0].axisLabel.rotate = $(view).find("input[name=xRotate]").val();
				option.yAxis[0].axisLabel.rotate = $(view).find("input[name=yRotate]").val();
				if(option.xAxis[0].type == undefined || option.xAxis[0].type == "category"){
					 option.xAxis[0].axisLabel.formatter = function(value){
						 var ret = "";//拼接加\n返回的类目项
						 var maxLength = 0;//每项显示文字个数
						 maxLength = $(view).find("input[name=xFormatter]").val();
						 if(maxLength){
							 var valLength = value.length;//X轴类目项的文字个数
							 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
							 if (rowN > 1)
							 {
								var temp = "";//每次截取的字符串
								var start = 0;//开始截取的位置
								var end = start + maxLength;//结束截取的位置
								temp = value.substring(start, end) + "...";
								ret += temp; //凭借最终的字符串
								return ret;
							 }
							 else
							 {
								return value;
							 }
						 }else{
							 return value;
						 }
					};
				}
				if(option.yAxis[0].type == undefined || option.yAxis[0].type == "category"){
					option.yAxis[0].axisLabel.formatter = function(value){
						 var ret = "";//拼接加\n返回的类目项
						 var maxLength = 0;//每项显示文字个数
						 maxLength = $(view).find("input[name=yFormatter]").val();
						 if(maxLength){
							 var valLength = value.length;//X轴类目项的文字个数
							 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
							 if (rowN > 1)
							 {
								var temp = "";//每次截取的字符串
								var start = 0;//开始截取的位置
								var end = start + maxLength;//结束截取的位置
								temp = value.substring(start, end) + "...";
								ret += temp; //凭借最终的字符串
								return ret;
							 }
							 else
							 {
								return value;
							 }
						 }else{
							 return value;
						 }

					};
				}
				_this.linkViewOption(option);
			}).popoverBind();
			$(view).find("select[name]").change(function(){
				$(view).find("select[name=xInterval]").val()!="0"?delete option.xAxis[0].axisLabel.interval:option.xAxis[0].axisLabel.interval=0;
				$(view).find("select[name=yInterval]").val()!="0"?delete option.yAxis[0].axisLabel.interval:option.yAxis[0].axisLabel.interval=0;
				_this.linkViewOption(option);
			}).popoverBind();
			$(this.settingPanel).append(view);
		};
		this.GRID = function()
		{
			var view = $($("#GRID").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			// 初始化输入框的值
			$(view).find("input[position]").each(function(i, item)
			{
				$(item).val(option.grid[0][$(item).attr("position")]).keyup(function()
				{
					option.grid[0][$(this).attr("position")] = $(this).val();
					_this.linkViewOption(option);
				}).popoverBind();
			});
			$(view).find("select[name=SHOW_VALUE]").on("change", function()
			{
				var value = $(view).find("select[name=SHOW_VALUE]").val();
				if (value)
				{
					option.series[0].itemStyle = {
						    "normal": {
								"label": {
						            "show": true,
						            "position": value
								        }
						    }
					};
					_this.linkViewOption(option);
				}else{
					option.series[0].itemStyle = {};
					_this.linkViewOption(option);
				}
			});
			$(this.settingPanel).append(view);
		};
		return $.extend(new metadata_view_chart_base(control), this);
	}

	function metadata_form_view_chart_common(control)
	{
		this.control = control;
		this.echart = echarts.init($(control).find(".echarts-div")[0]);
		return $.extend(new metadata_form_view_chart_base(control), this);
	}
</script>

<!-- 控制面板 图表 画布 -->
<script type="text/html" id="GRID">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="8">画布</td>
		</tr>
		<tr>
			<td class="setting-control-label">上边距</td>
			<td><input position="top" class="form-control" data-content="图表上边距大小,像素单位" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label">右边距</td>
			<td><input position="right" class="form-control" data-content="图表右边距大小,像素单位" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label">下边距</td>
			<td><input position="bottom" class="form-control" data-content="图表下边距大小,像素单位" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label">左边距</td>
			<td><input position="left" class="form-control" data-content="图表左边距大小,像素单位" data-trigger="manual" data-placement="bottom"></td>
		</tr>
		<tr>
			<td class="setting-control-label">显示值在图表位置</td>
			<td>
				<select name="SHOW_VALUE" class="form-control" style="width:100px;">
					<option value="">请选择</option>
					<option value="top">上</option>
					<option value="left">左</option>
					<option value="right">右</option>
					<option value="bottom">下</option>
				</select>
			</td>
		</tr>
	</table>
</div>
</script>
<!-- 控制面板 图表 X/Y轴单位 -->
<script type="text/html" id="X_Y_AXIS">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="4">坐标轴设置</td>
		</tr>
		<tr>
			<td class="setting-control-label">X轴单位</td>
			<td><input name="xAxis" class="form-control" data-content="更换X轴的单位名称" data-trigger="manual"  data-placement="top"></td>
			<td class="setting-control-label">Y轴单位</td>
			<td><input name="yAxis" class="form-control" data-content="更换Y轴的单位名称" data-trigger="manual"  data-placement="top"></td>
		</tr>
		<tr>
			<td class="setting-control-label">X轴项目类角度</td>
			<td><input name="xRotate" class="form-control" data-content="X轴项目类的倾斜角度" data-trigger="manual"  data-placement="top"></td>
			<td class="setting-control-label">Y轴项目类角度</td>
			<td><input name="yRotate" class="form-control" data-content="Y轴项目类的倾斜角度" data-trigger="manual"  data-placement="top"></td>
		</tr>

	</table>
</div>
</script>
<script  type="text/html" id="X_SHOW">
	<td class="setting-control-label">x轴是否显示全部</td>
	<td>
		<select name="xInterval" class="form-control" style="width:100px;" data-content="X轴是否显示全部单位" data-trigger="manual">
			<option value="1">否</option>
			<option value="0">是</option>
		</select>
	</td>
</script>
<script  type="text/html" id="Y_SHOW">
	<td class="setting-control-label">y轴是否显示全部</td>
	<td>
		<select name="yInterval" class="form-control" style="width:100px;">
			<option value="1">否</option>
			<option value="0">是</option>
		</select>
	</td>
</script>
<!-- 显示X轴名称最大长度  -->
<script type="text/html" id="X_AXIS_LENGTH">
	<td class="setting-control-label">X轴项目类长度</td>
	<td>
		<input name="xFormatter" class="form-control">
	</td>
</script>
<!-- 显示Y轴名称最大长度  -->
<script type="text/html" id="Y_AXIS_LENGTH">
	<td class="setting-control-label">Y轴项目类长度</td>
	<td>
		<input name="yFormatter" class="form-control">
	</td>
</script>
<!-- 控制面板 图表 dataSet基本配置 -->
<script type="text/html" id="DATASET">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="2">dataSea配置</td>
		</tr>
		<tr>
			<td colspan="2"><textarea class='form-control' placeholder="请配置SQL语句"></textarea></td>
		</tr>
		<tr>
			<td class="setting-control-form2"><a href="javascript:;" class="btn btn-default btn-sm sql-btn">执行SQL</a></td>
			<td><a href="javascript:;" class="btn btn-default btn-sm add-btn">增加dataSea</a></td>
		</tr>
        <tr>
            <td>下钻页面</td>
            <td>
                <input name="linkMc" class="form-control" data-content="下钻页面的视图ID" data-trigger="manual"
                       data-placement="bottom" readonly="readonly" data-target="#linkResourceModal" data-toggle="modal">
                <input  name="linkId" type="hidden"/>
            </td>
        </tr>
	</table>
</div>
</script>
<!-- 控制面板 图表 dataSet详细配置 -->
<script type="text/html" id="DATASET_DETAIL">
<div class="dataset_detail">
	<table class="setting-control-table">
		<tr>
			<td class="setting-control-label">名称</td>
			<td><input name="title" class="form-control" data-content="图表名称" data-trigger="manual"  data-placement="bottom"></td>
			<td class="setting-control-label">字段</td>
			<td><input name="column" class="form-control" data-content="配置SQL的字段名称" data-trigger="manual"  data-placement="bottom"></td>
			<td class="setting-control-label">系列</td>
			<td class="setting-control-label">分类</td>
			<td><input name="stack" class="form-control" data-content="图例分类，相同分类的柱子将会堆叠" data-trigger="manual"  data-placement="bottom"></td>
			<td>
				<select name="series" class="form-control" style="width:100px;">
					<option value="bar">柱形图</option>
					<option value="line">线形图</option>
				</select>
			</td>
			<td>
				<a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除</a>
			</td>
		</tr>
	</table>
</div>
</script>
<!-- 显示单位在图表中  -->
<script type="text/html" id="SHOW_VALUE">

</script>
</div>
